<template>
  <div class="home">
    <div class="home-search">
      <!-- <van-icon class="home-search-icon" name="search" size="20px" color="#3f3f3f" /> -->
      <img src="../../assets/search.png" class="home-search-icon"/>
      <input class="home-search-input" placeholder="请输入鱼只鱼缸" />

    </div>
    <div class="home-tab">
      <div class="home-tab-div" v-for="(item, index) in tab" :key="index" @click="tabChange(index)">
        <div class="home-tab-name" :class="{'home-tab-name-active':tabIdx === index}">{{item}}</div>
        <div class="home-tab-btm" :class="{'home-tab-btm-active':tabIdx === index}"></div>
      </div>
    </div>
    <div class="home-detail" @click="goDetail()">
      <div class="home-detail-line"></div>
      <div class="home-detail-con">
        <div class="home-detail-img"></div>
        <div class="home-detail-msg">
          <div class="home-detail-msg-name">1号缸</div>
          <div class="home-detail-msg-tips">
            <div class="home-detail-msg-tips-l">鱼缸简单介绍</div>
            <div class="home-detail-msg-tips-c"></div>
            <div>鱼缸介绍</div>
          </div>
          <div>撒大大大大我端午大范围对外菲菲</div>
        </div>
      </div>
    </div>
    <FootTab></FootTab>

  </div>
</template>

<script>
import FootTab from '../../components/footTab.vue'
export default {
  data () {
    return {
      value: '',
      active: 2,
      tab: ['水族馆1楼', '水族馆2楼', '水族馆3楼', '剧场1楼'],
      tabIdx: 0,
      tab2: ['鱼缸', '设备', '实验室', '统计', '的'],
      tabIdx2: 0,
      fullHeight: '',
    }
  },
  methods: {
    tabChange (index) {
      this.tabIdx = index
    },
    goDetail () {
      this.$router.push({path: '/home/detail'})
    }
  },
  components: {
    FootTab
  }
}
</script>

<style>
.home-search{
  margin-left: 25px;
  width: 700px;
  height: 64px;
  background: #ECEBEB;
  display: flex;
  align-items: center;
  border-radius:10px;
}
.home-search-icon{
  margin-left: 17px;
  margin-right: 24px;
  width: 31px;
  height: 31px;
}
.home-search-input{
  width: 600px;
  height: 27px;
  font-size: 28px;
  background: #ECEBEB;
}
.home-tab{
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
}
.home-tab-div{
  display: flex;
  flex-direction: column;
  align-items: center;

}
.home-detail-msg{
  font-size: 26px;
  color: #000;
}
.home-tab-name{
  padding-top: 34px;
  padding-bottom: 18px;
  font-weight: normal;
   color: #999;
}
.home-tab-name-active{
  font-weight: bold;
   color: #009EEA;
}
.home-detail-msg-tips{
  display: flex;
  color: #4D4D4D;
  margin-bottom: 19px;
}
.home-detail-msg-tips-l{
  color: #000;
}
.home-detail-msg-tips-c{
  width:2px;
  height:24px;
  background: #e5e5e5;
  margin: 0 21px;
}

.home-tab-btm{
  height: 6px;
  background: #fff;
  border-radius:3px;
  width: 70px;
}
.home-tab-btm-active{
  background: #444;
  background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));
}

.home-detail{
  width:690px;
  position: fixed;
  bottom: 98px;
  z-index: 998;
  background:rgba(255,255,255,1);
  box-shadow:0px -3px 0px 0px rgba(224,224,224,0.8);
  border-radius:25px 25px 0px 0px;
  padding: 14px 30px 29px;
}
.home-detail-line{
  width:55px;
  height:6px;
  background:#d8d8d8;
  margin: 0 auto;
}
.home-detail-con{
  display: flex;
}
.home-detail-img{
  width:142px;
  height:142px;
  background:#d8d8d8;
  border-radius:10px;
}
.home-detail-msg{
  width: 534px;
  margin-left: 28px;
}
.home-detail-msg-name{
  font-size:38px;
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 22px;
}
</style>
